<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Theme Editor</title>


<script type="text/javascript">
require([
    "dojox/mobile",
    "dojox/mobile/parser",
    "dojox/mobile/View",
    "dojox/mobile/Button",
    "dojox/mobile/ToggleButton",
    "dojox/mobile/Switch",
    "dojox/mobile/Heading",
    "dojox/mobile/RoundRect",
	"dijit/form/DataList",
	"dojox/mobile/ComboBox"
	
]);

</script>
<style>@import "../../themes/claro/claro.css";
</style>
<style>
  body {
    padding : 5px;
    margin : -5px;
}

</style>
</head>
<body class="dj_tablet ipad claro">

 <style>
  body {
    padding : 5px;
    margin : -5px;
}

  .theming-group {
    padding : 0;
    padding-top : .3em;
    padding-bottom : 0;
    border-spacing : 0;
    margin-top : 1px;
    margin-bottom : 22px;
}

  .theming-group-title {
    color : black;
    font-family : Arial;
    font-size : 14px;
    font-weight: bold;
    padding-left : 7px;
    padding-top : 7px;
}

  .theming-group-widgets {
    padding : 0;
    background : white;
    font-size : 14px;
}

  .theming-widget {
    position : relative;
}

  .theming-widget-spacer {
    height : 10px;
}

  .theming-note {
    font-size : 12px;
    font-style : normal;
    padding : 4px 17px 10px;
    margin : 2px 0;
}

  .global-widget-names {
    font-size : 12px;
    font-style : italic;
    text-align: center;
}

  -widgets#other {
    width : 40em;
}

  #SampleContentPane {
    width : 200px;
    overflow : hidden;
}

  #SampleAccordionPane {
    width : 200px;
    height : 150px;
}

  #SampleTabContainer {
    width : 175px;
    height : 150px;
}

  .widget-sample {
    margin-left : .3em;
    margin-right : .3em;
    margin-top : .3em;
    margin-bottom : .1em;
}

  div.HtmlWidget {
    min-width : 0;
    min-height : 0;
    outline : none;
    outline-color : none;
}

  SPAN.HtmlWidget {
    outline : none;
}

  A.HtmlWidget {
    outline : none;
}

  table.HtmlWidget {
    outline : none;
}

  td.HtmlWidget {
    outline : none;
}

  TH.HtmlWidget {
    outline : none;
}

  .editContextContainer FORM, .editContextContainer .dijitContentPane, .editContextContainer .dojoxScrollWindow {
    outline : none;
}

  .editContextContainer .dijitTabContainer .dijitContentPane {
    outline : none;
}

  div.mblView, div[dojotype="dojox.mobile.ContentPane"] {
    outline : none;
}

  .resetClaroFontBg.resetClaroFontBg {
    color : black;
    font-family : Myriad, Helvetica, Tahoma, Arial, clean, sans-serif;/* Class name repeated twice to win the cascade 
    

    */

    font-size : 12px;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : white;
    background-image : none;
    background-origin : padding-box;
    background-position : 0% 0%;
    background-repeat : repeat;
    background-size : auto auto;
}

  .fakeSilhouette3 {
    border : 12px solid #444;
    border-radius : 12px;
    background : #444;
    margin-left : 2px;
}

  .fakeSilhouette2 {
    border : 1px solid #eee;
    background : #eee;
    border-radius : 6px;
}

  .fakeSilhouette1 {
    border : 6px solid transparent;
    border-radius : 6px;
}

  .widgetLabel {
    margin-top : 10px;
    margin-bottom : 3px;
}

  .widgetLabelNote {
    margin-left : 1em;
    font-size : 80%;
    font-style : italic;
}

  .dijitTabContainer .dijitContentPane {
  	padding:10px;
}

</style>
<div class="resetClaroFontBg" style="margin: -1px;">
 <div class="theming-group">
  <div class="theming-group-title">
			Global Styling
		</div>

		<div class="theming-group-widgets" style="background:white; height:130px;">
			<div class="theming-note">To change page-level backgrounds and fonts, 
				click inside the box below to select it, 
				then change background properties and/or font properties in the Properties palette.</div>
			<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:&quot;Page styling&quot;" style="padding-top:3px;">
				<div class="fakeSilhouette3" style="width:420px;">
					<div class="fakeSilhouette2">
						<div class="fakeSilhouette1 useBodyFontBg" style="height:40px;">
							<div id="View_0" dojoType="dojox.mobile.View" class="dvThemeWidget" style="height: 100%;" selected="true">
								Page background and fonts
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="theming-group-widgets" style="background:white; height:130px;">
			<div class="theming-note">To change shared background and font properties across multiple widgets, click on one of widgets below and change background and/or font properties in the Properties palette:</div>
			<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:&quot;Shared widget styling&quot;">
				<table border="0" cellspacing="0" cellpadding="0">
					<tbody>
						<tr>
							<td class='global-widget-names'>Heading, TabBar, EdgeToEdgeCategory</td>
							<td>&nbsp;</td>
							<td class='global-widget-names'>Buttons, CheckBox, RadioButton</td>
						</tr>
						<tr>
							<td>
								<div class="fakeSilhouette3" style="width:300px; display:inline-block; vertical-align:top;">
									<div class="fakeSilhouette2">
										<div class="fakeSilhouette1 useBodyFontBg" style="height:40px;">
											<div class="globalWidget">
												<h1 label="Heading Background" dojoType="dojox.mobile.Heading" class="dvThemeWidget" id="allHeadingBackground" ></h1>
											</div>
										</div>
									</div>
								</div>
							</td>
							<td>&nbsp;</td>
							<td>
								<div class="fakeSilhouette3" style="width:300px; display:inline-block; vertical-align:top;">
									<div class="fakeSilhouette2">
										<div class="fakeSilhouette1 useBodyFontBg" style="height:40px;">
											<div class="globalWidget">
												<button label="Button Background" dojoType="dojox.mobile.Button" class="dvThemeWidget" id="allButtonBackground"></button>
											</div>
										</div>
									</div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
 </div>

 <div class="theming-group">
 <div class="theming-group-title">
		Widget Styling
	</div>

 <div class="theming-group-widgets" style="background:white; height:160px;">
  <div class="theming-note">To change styling for particular widgets, navigate into the appropriate section below, click on a particular widget below to select it, then change styling properties in the Properties palette.</div>


  <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="style:&quot;width: 100%; height: 600px; margin:0 15px;&quot; ">
   <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:&quot;Headings &amp; TabBars&quot;">
    <div class="fakeSilhouette3" style="width:420px;">
     <div class="fakeSilhouette2">
      <div class="fakeSilhouette1 useBodyFontBg" style="height:350px;">
       <div class="widgetLabel">Heading:</div>
       <div class="theming-widget" style="width: auto;">

        <h1 label="Heading" dojoType="dojox.mobile.Heading" class="dvThemeWidget" back="back"></h1>
       </div>
       <div class="widgetLabel">ToolBarButton:</div>
       <div class="theming-widget" style="min-height: 27px;">
        <div label="ToolBarButton" dojotype="dojox.mobile.ToolBarButton" sync="true" class="dvThemeWidget"></div>
       </div>
       <div class="widgetLabel">TabBar and TabBarButton:</div>
       <div class="theming-widget">
        <ul dojoType="dojox.mobile.TabBar" barType="segmentedControl" class="dvThemeWidget">
         <li label="TabBarButton" dojoType="dojox.mobile.TabBarButton" sync="true"></li>
         <li label="TabBarButton" dojoType="dojox.mobile.TabBarButton" sync="true"></li>
        </ul>
       </div>
      </div>
     </div>
    </div>
   </div>

   <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:&quot;Rects &amp; Lists&quot;">
    <div class="fakeSilhouette3" style="width:420px;">
     <div class="fakeSilhouette2">
      <div class="fakeSilhouette1 useBodyFontBg" style="height:350px;">
       <div class="theming-widget">
               <div label="RoundRectCategory" dojoType="dojox.mobile.RoundRectCategory" class="dvThemeWidget"></div>
       </div>
       <div class="theming-widget-spacer"></div>
       <div class="theming-widget">
               <div label="EdgeToEdgeCategory" dojoType="dojox.mobile.EdgeToEdgeCategory" class="dvThemeWidget"></div>
       </div>
       <div class="widgetLabel">RoundRectList and EdgeToEdgeList:</div>
       <div class="widgetLabelNote">(Note: ListItem styling is shared between RoundRectList and EdgeToEdgeList.)</div>
       <div class="theming-widget">
        <ul dojoType="dojox.mobile.RoundRectList" class="dvThemeWidget">
         <li label="Item 1" dojoType="dojox.mobile.ListItem" sync="true" moveTo="test"></li>
         <li label="Item 2" dojoType="dojox.mobile.ListItem"></li>
        </ul>
       </div>
      </div>
     </div>
    </div>
   </div>

   <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:&quot;Controls&quot;">
    <div class="fakeSilhouette3" style="width:420px;">
     <div class="fakeSilhouette2">
      <div class="fakeSilhouette1 useBodyFontBg" style="height:350px;">

  <table>
   <tbody>
        <tr valign="top">
         <td>Button:</td>
         <td style="width:450px">
          <div class="theming-widget">
           <button label="Button" dojoType="dojox.mobile.Button" class="dvThemeWidget"></button>
          </div>
         </td>
        </tr>
         <tr>
          <td>ToggleButton:</td>
          <td>
           <div class="theming-widget">
            <button label="ToggleButton" dojoType="dojox.mobile.ToggleButton" class="dvThemeWidget"></button>
           </div>
          </td>
         </tr>
         <tr>
          <td>CheckBox:</td>
          <td>
           <div class="theming-widget">
            <input type="checkbox" dojoType="dojox.mobile.CheckBox" class="dvThemeWidget"></input>
           </div>
          </td>
         </tr>
         <tr>
          <td>RadioButton:</td>
          <td>
           <div class="theming-widget">
            <input type="radio" dojoType="dojox.mobile.RadioButton" class="dvThemeWidget"></input>
           </div>
          </td>
         </tr>
         <tr>
          <td>TextArea:</td>
          <td>
           <div class="theming-widget">
            <textarea dojoType="dojox.mobile.TextArea" class="dvThemeWidget">Text Area</textarea>
           </div>
          </td>
         </tr>
         <tr>
          <td>Switch:</td>
          <td>
           <div class="theming-widget">
            <div dojoType="dojox.mobile.Switch" id="mobile_theme_switch" class="dvThemeWidget"></div>
           </div>
          </td>
         </tr>
         <tr>
          <td>TextBox and ComboBox:</td>
          <td>
           <div class="theming-widget">
            <input type="text" dojoType="dojox.mobile.TextBox" class="dvThemeWidget" value="TextBox/ComboBox"></input>
           </div>
          </td>
         </tr>
         <tr>
          <td>ComboBox list:</td>
          <td style="height:120px; vertical-align: top;">
           <div class="theming-widget" style="margin-left: 5px;">
            <div class="dijitPopup mblComboBoxMenuPopup dvThemeWidget">
             <div class="mblReset mblComboBoxMenu">
              <div>
                <div class="mblReset mblComboBoxMenuItem mblComboBoxMenuPreviousButton" role="option">Previous choices</div>
                <div class="mblReset mblComboBoxMenuItem themeEditorComboBoxItemLocator" role="option">ComboBox Item 1</div>
                <div class="mblReset mblComboBoxMenuItem" role="option">ComboBox Item 2</div>
                <div class="mblReset mblComboBoxMenuItem mblComboBoxMenuNextButton" role="option">More choices</div>
              </div>
              <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; right: 2px; width: 5px; top: 4px; height: 34px; -webkit-mask-image: -webkit-canvas(scrollBarMaskV); " class="mblScrollBarWrapper">
               <div style="position: absolute; background-color: rgb(96, 96, 96); font-size: 1px; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px; z-index: 2147483647; width: 5px; height: 29px; opacity: 0; " class=""></div>
              </div>
             </div>
            </div>
           </div>
          </td>
         </tr>

        </tbody>
       </table>

      </div>

     </div>
    </div>
   </div>
  </div>


 </div>
</div>

</div>
</body></html>
